雖然之前就有寫過一篇Vue.js常見指令，但我發現教材裡面還有一些之前沒有看到的指令或者之前雖然有使用過這個指令但這個用法沒有看過，所以決定在這裡再加入一篇介紹Vue.js指令的章節。

v-model -> textarea

之前在使用到v-model都是使用在input的功能，讓user input可以立刻顯示在網頁上，textarea與input的寫法基本上一模一樣，只是textarea可以調整輸入框的大小更適合使用在問卷調查或其他需要使用者輸入多行文字場合。
程式:

    <!-- v-model -->
    <div id="v-model">
        <p>try the difference</p>
        <p>
          <span>Multiline message is:</span> {{ message }}
        </p>
        <textarea v-model="message"></textarea>

        <textarea>{{ message }}</textarea>
        <p></p>
    </div>

        // v-model
        const model = Vue.createApp({
            data () {
            return {
                    message: 'try me!'
                } 
            }
        }).mount('#v-model');

radio/checkbox/select

上面這三個都是需要與v-model搭配來使用

選擇框

radio的單選框和checkbox的複選框是input提供的選擇type，radio是藉由在input中加入v-model來指定選擇狀態，當然也需要定義為選項加上id和value還有網頁顯示的名稱。
checkbox則是可以將選項設定為複選的選擇框，而當選項只有一個的時候也可以將它當作true/false的選項，而他們的程式寫法也基本上與radio相同，只是因為是複選所以所以v-modle對應的data中的狀態與radio不同需要用陣列儲存，如果想要加入全選或以上皆非的選項也可以直接更改data中儲存的陣列。
程式:

    <!-- radio單選 -->
    <div id="v-radio">
        <div>
          <input type="radio" id="1" value="male" v-model="picked">
          <label for="1">Male</label>
        </div>
        <div>
          <input type="radio" id="2" value="female" v-model="picked">
          <label for="2">Female</label>
        </div>
        <p>you have choose: {{ picked }}</p>
        <p></p>
    </div>

    <!-- checkbox複選 -->
    <div id="v-checkbox">
        <h2>what sweets do you prefer?</h2>
        <input type="checkbox" id="chocolate" value="chocolate" v-model="sweets">
        <label for="chocolate">chocolate</label>
        
        <input type="checkbox" id="Soufflé" value="Soufflé" v-model="sweets">
        <label for="Soufflé">Soufflé</label>
        
        <input type="checkbox" id="Layer cake" value="Layer cake" v-model="sweets">
        <label for="Layer cake">Layer cake</label>

        <input type="checkbox" id="other" value="other" v-model="sweets">
        <label for="other">other</label>
      
        <br>
        <p>you have choose: {{ sweets }}</p>
    </div>

        // radio
        const radio = Vue.createApp({
            data () {
                return {
                    picked: ''
                }
            }
        }).mount('#v-radio');

        // checkbox 
        const checkbox = Vue.createApp({
            data () {
                return {
                    //陣列
                    sweets: []
                }
            }
        }).mount('#v-checkbox');

下拉式選單

select元素就是在前端開發語言很常見的下拉式選單，將select與option做組合就可以形成下拉式選單，要注意的點就是v-model要加在select的標籤部分而不是下面的選項。
程式:

    <!-- select選單 -->
    <div id="select">
        <select v-model="selected">
          <option disabled value="">choose your age</option>
          <option>0~12</option>
          <option>13~18</option>
          <option>19~30</option>
          <option>31~40</option>
          <option>above 40</option>
        </select>
        
        <p>Your age is: {{ selected || 'please choose' }}</p>
    </div>

        // select
        const select = Vue.createApp({
            data () {
                return {
                selected: ''
                }
            }
        }).mount('#select');

在上面DOM輸出的部分有一個點就是"||"是javaScript裡面的一個運算子邏輯代表"OR"也就是如果"||"前面的內容無法背書出則改為輸出"||"後面的內容，從上面的程式來看就是如果user還沒有選擇就代表data中沒有東西可以回傳到網頁讓它輸出，所以網頁上就會輸出"||"後面的字串'please choose'。
今天的練習在網頁上的呈現:

modifiers

寫到這裡發現Vue.js的指令怎麼感覺都跟v-model有點關係，而且不只這些，因為v-model其實是將很多事件在背後自己解決所以Vue.js為了一些功能還為v-model加上了"修飾子(Modifiers)"來讓我們寫程式更方便。

我覺得最常會在程式裡需要使用到的修飾子應該就是這兩個:

• v-model.lazy: 將input改為監聽change也就是user離開輸入框才會修改data。
• v-model.number: 將DOM API取出input內容的形式從字串更改為數字。

今天的進度先到這裡，明天將繼續一些雖然我暫時不知道會在哪裡用到教材有介紹的Vue.js的其他指令，謝謝閱讀。